<template name="globalMenus">
  <view class="position-relat global-menus-wrap" :class="{ opacity: isOpacity }">
    <!-- :style="{paddingBottom: (statusBarObject.saveBottom > 0 ? statusBarObject.saveBottom: (statusBarObject.saveBottom + 5)) + 'px'}" -->
    <view
      class="position-relat global-menus-inner global-menus-bg flex-row-space-around"
      :style="{
        paddingTop: statusBarObject.saveBottom > 0 ? '10px' : '18px',
        paddingBottom: statusBarObject.saveBottom > 0 ? 'env(safe-area-inset-bottom)' : '26px',
      }"
    >
      <view
        class="position-relat menu-item flex-column-cc"
        v-for="(item, index) in menus"
        :class="{ current: menuOrder == index, 'scan-btn': item.type == 2 }"
        :key="item.id"
        @tap="
          () => {
            if (item.type == 1) {
              gotoUrl(item);
            } else {
              scanCodeHandler();
            }
          }
        "
      >
        <view
          class="position-relat menu-icon flex-row-center"
          v-if="item.type == 1"
          :class="{ 'scan-icon': item.type == 2 }"
          :style="{
            background: 'url(' + (menuOrder == index ? item.activeIcon : item.icon) + ') center top no-repeat',
            backgroundSize: item.type == 2 ? '100% auto' : '100% auto',
          }"
        >
          <view class="position-relat menu-name flex-row-center"
            ><text>{{ item.title }}</text>
          </view>
        </view>
        <view
          class="position-relat scan-icon-bg flex-row-center"
          v-if="item.type == 2"
          :style="{
            top: statusBarObject.saveBottom > 0 ? '-80rpx' : '-94rpx',
          }"
        >
          <view class="position-relat scan-icon flex-row-center"></view>
        </view>
      </view>
    </view>
    <!-- 登录弹窗 -->
    <login-modal :visible.sync="loginModalVisible" />
  </view>
</template>
<script>
import { getLoginStatus } from '@/utils/login';
import { scanCode, getSign } from '@/utils/scan-qrcode.js';
import { course_tab_index_map } from '@/constants/system-config';
export default {
  name: 'globalMenus',
  props: {
    menuOrder: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      loginModalVisible: false, // 登录弹窗的控制隐藏
      isOpacity: true,
      statusBarObject: {
        saveBottom: 0,
      },
      menus: [
        {
          id: 'menus1',
          type: 1,
          title: '首页',
          name: 'home',
          icon: 'https://oss-cc-wuhan-2.cecloudcs.com/meta-sports-image/images/7ab4d0b70d99999a47b70031bef196f6.png',
          activeIcon:
            'https://oss-cc-wuhan-2.cecloudcs.com/meta-sports-image/images/bf02f8f2d35a22dc874e9abe9eff75bd.png',
          url: '/pages/index/index',
        },
        {
          id: 'menus2',
          type: 1,
          title: '课程',
          name: 'courses',
          icon: 'https://oss-cc-wuhan-2.cecloudcs.com/meta-sports-image/images/27f030aa550ecc0944d42d5c186c1540.png',
          activeIcon:
            'https://oss-cc-wuhan-2.cecloudcs.com/meta-sports-image/images/0de12895abbcb2eff14756af28f6d296.png',
          url: '/pages/courses/index',
        },
      ],
    };
  },

  watch: {},
  onLoad() {},
  onShow() {},
  onHide() {},
  mounted() {
    this.isOpacity = false;
    this.statusBarObject = getApp().globalData.statusBarObject;
  },
  beforeDestroy() {},
  methods: {
    scanCodeHandler() {
      getLoginStatus().then(isLogin => {
        if (isLogin) {
          scanCode();
        } else {
          this.loginModalVisible = true;
        }
      });
    },
    setForKey(pre, idx) {
      return pre + idx;
    },
    gotoUrl(item) {
      // 将课程tab页面下的tab下标重置为第一个
      getApp().globalData.courseTabIndex = course_tab_index_map.group_course;
      uni.switchTab({
        url: item.url,
      });
      uni.hideTabBar({
        animation: false,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.global-menus-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 0px;
  z-index: 3;
  // overflow: hidden;
  transition: opacity 0.5s;
  &.opacity {
    opacity: 0;
  }
  .global-menus-inner {
    width: 100%;
    padding-top: 10px;
    padding-bottom: env(safe-area-inset-bottom);
    background: url('https://image.cestc-yd.cn/images/97bbfec216275a8489f4adc96a6f3a78.png') center bottom no-repeat;
    background-size: 100% 100%;
    .menu-item {
      width: 31px;
      .menu-icon {
        width: 31px;
        height: 33px;
        .menu-name {
          position: absolute;
          bottom: -12px;
          min-width: 80px;
          padding: 0 10rpx;
          height: 14px;
          font-size: 19rpx;
          line-height: 14px;
          text-align: center;
          color: #3c3c3c;
        }
      }

      &.current {
        .menu-icon {
          .menu-name {
            color: #0089ff;
            font-weight: bold;
          }
        }
      }
      &.scan-btn {
        width: 115rpx;
        height: 33px;
        .scan-icon-bg {
          position: absolute;
          width: 115rpx;
          height: 115rpx;
          border-radius: 100%;
          background-image: linear-gradient(150deg, #07dfff 0%, #f18af4 100%);
          box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
          .scan-icon {
            width: 56rpx;
            height: 56rpx;
            background: url('https://image.cestc-yd.cn/images/ae65af8cf10a7b89c47d8630073b37a9.png') center center
              no-repeat;
            background-size: 100% auto;
          }
        }
      }
    }
  }
}
</style>
